<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/recommend.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/home.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
</head>

<body>

<header>
    <div id="top">

        <p>
            <span id="logo">MEOW</span>
            <span><a href="front_home.html">首页</a></span>
            <span><a href="front_courseList.html">课程列表</a></span>
            <span><a href="front_login.html">用户登录</a></span>
        </p>

    </div>
</header>

<!-- 轮播图 -->
<div class="trent-slider">
    <div class="t-slide current-t-slide">
        <img src="img/carouse1.jpg" alt="" />
    </div>
    <div class="t-slide">
        <img src="img/carouse2.jpg" alt="" />
    </div>
    <div class="t-slide">
        <img src="img/carouse3.jpg" alt="" />
    </div>
    <div class="t-slide">
        <img src="img/carouse4.jpg" alt="" />
    </div>
    <div class="t-slider-controls">
        <div class="arrow right-arrow">
            <div class="arrow-container">
                <div class="arrow-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
            </div>
        </div>
        <div class="arrow left-arrow">
            <div class="arrow-container">
                <div class="arrow-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
            </div>
        </div>
        <div class="t-load-bar">
            <div class="inner-load-bar"></div>
        </div>
        <div class="t-dots-container">
            <div class="t-slide-dots-wrap">
                <div class="t-slide-dots">

                </div>
            </div>
        </div>
    </div>
</div>



<!-- 新闻&课程 -->
<div id="newsAndCourses">

    <!-- 新闻 -->
    <div id="news">
        <h3 class="topic">校内新闻</h3>
        <hr>
        <div class="grandfather" id="newsContent">

            <ul class="father" v-cloak>
                <li v-for="(news, key, index) in news" class="newsIndex">
                    <div @click="onclick(news)">
                        <div class="newsTitle">{{news.index}}.{{ news.title }}</div>
                        <div class="time">{{ news.updateTime }}</div>
                    </div>

                </li>

            </ul>
        </div>
    </div>

    <!-- 课程 -->
    <!-- 最新课程 -->
    <div id="newCourses">
        <h3 class="topic">最新课程</h3>
        <hr>
        <div class="gdt grandfather">
            <div class="father" id="newClass" v-cloak>
                <div class="course" v-for="item in newClass">
                    <div class="coursePic" @click="onclick(item)">
                        <img :src=item.image class="courseImg">
                    </div>
                    <div>
                        <p class="courseInfo">{{ item.name }}</p>
                        <p>{{ item.classplace }}</p>
                        <p>{{ item.beginweek }} - {{ item.endweek }}周</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 最热课程 -->
    <div id="hotCourses">
        <h3 class="topic">最热课程</h3>
        <hr>
        <div class="gdt grandfather" >
            <div class="father" id="hot" v-cloak>
                <div class="course" v-for="item in hot">
                    <div class="coursePic" @click="onclick(item)" :style="{backgroundImage: 'url(' + item.image + ')', backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center center'}">
                        <img :src=item.image class="courseImg">
                    </div>
                    <div>
                        <p class="courseInfo">{{ item.name }}</p>
                        <p>{{ item.classplace }}</p>
                        <p>{{ item.beginweek }} - {{ item.endweek }}周</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.yx_rotaion.js"></script>
<script src="js/index.js" type="text/javascript"></script>
<script src="js/home.js" type="text/javascript"></script>

<script>

</script>

</body>

</html>